<template>
    <div>
        <div class="row top-row">
            <div class="col-md-12" >
                <div class="top-image">
                    <img class="top-image-style" src="../assets/images/danghuitouxiang.jpg"/>
                </div>
                <div class="top-image-title">
                    {{user.username}}
                </div>
                <div v-if="user.usertype=='1'" class="usertypeshow">
                    <mt-progress :value="60">
                    </mt-progress>
                    <div class="usertype-title">
                        <div class="usertype-title-left">
                          LV2
                        </div>
                        <div class="usertype-titlle-right">
                           <span class="sys-default-color"> 800</span>/10000
                        </div>
                    </div>
                </div>
                <div class="top-list">
                    <ul>
                        <li >
                            <p class="default-color">优秀</p>
                            <p class="default-titlte">{{topdata.usernumstitle}}</p>
                        </li>
                        <li class="li-border">
                            <p class="default-color">26</p>
                            <p class="default-titlte">{{topdata.numstitle}}</p>
                        </li>
                        <li class="li-border">
                            <p class="default-color">3</p>
                            <p class="default-titlte">{{topdata.starttitle}}</p>
                        </li>
                    </ul>
                    <p class="border-style"></p>
                </div>
            </div>
        </div>

        <div class="footer-item-bottom"  v-if="user.usertype=='2'">
            <div class="login-botton-style" @click="openjidenlist()">
                <a  class="a-style" >支部概览</a>
            </div>
        </div>

        <div class="footer-item-bottom footer-item-bottom-usertype3"  v-if="user.usertype=='3'">
            <div class="login-botton-style login-botton-style-usertype3">
                <a @click="openurl('list2')" class="a-style">党员积分概括</a>
            </div>
            <div class="login-botton-style login-botton-style-usertype3">
                <a @click="openurl('add')"  class="a-style"　>上传活动</a>
            </div>
        </div>




        <div class="body-top">
            {{user.usertype==2?'活动审批':'活动预览'}}
        </div>
        <div class="row">
            <div v-for="item in [1,2,3]" class="item-list" @click="openmenage(item)">
                <div class="item-title">
                    <div class="item-title-left">
                        组织生活会
                    </div>
                    <div class="item-title-right">
                        1993-02-28
                    </div>
                </div>
                <div class="item-body">
                    <div class="item-body-left">
                        喜迎十九大.畅谈新变化征文:城市为何有的温度的真正原因。魔卡
                    </div>
                </div>
                <div class="item-bottom">
                    <div class="item-bottom-left">
                        上海中心22楼
                    </div>
                    <div class="item-bottom-right">
                        {{user.usertype==1?'+3':'待审核'}}
                    </div>
                </div>
            </div>
            <div class="loading">
                更多
            </div>
        </div>
        <appfooter></appfooter>
    </div>
</template>
<script>
    import Vue from 'vue';
    import appfooter from '../components/appfooter';
    var topdatas={
        user1:{
            starttitle:"活动次数",
            numstitle:"积分",
            usernumstitle:"评价"
        },
        user2:{
            starttitle:"党员总数",
            numstitle:"支部总数",
            usernumstitle:"待审批"
        },
        user3:{
            starttitle:"活动次数",
            numstitle:"积分",
            usernumstitle:"评价"
        }
    }
    export default {
        data () {
            return {
                user:{
                    usertype:"",
                    order:"",
                    username:"陆家嘴第一党支书"
                },
                topdata:{}
            }
        },
        created:function(){
            var type=this.$route.params['id'];
            if(type=='1'){
              this.user.username="陆家嘴党委";
              this.user.usertype=1;
            }else if(type=='2'){
                this.user.username="陆家嘴综合党委";
                this.user.usertype=2;
            }else if(type=='3'){
                this.user.username="陆家嘴综合党委";
                this.user.usertype=3;
            }
            this.topdata=topdatas['user'+type];
        },
        watch: {
            '$route': 'fetchData'
        },
        methods: {
            openjidenlist:function () {
                this.$router.push({name:'list',params:{
                    id:this.user.usertype
                }})
            },
            openmenage:function (item) {
                this.$router.push({name:'selectbyid',params:{
                    id:this.user.usertype
                }})
            },
            openurl:function (url) {
                this.$router.push({name:url,params:{
                    id:this.user.usertype//测试放name
                }})
            },
            fetchData:function () {

            }
        },
        mounted () {
        },
        components: {
            'appfooter':appfooter
        }
    }
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
    .a-style{
        color: #ffffff;
        font-size: 14px;
    }
    .top-image{
        text-align: center;
        .top-image-style{
            width: 80px;
            height: 80px;
        }
    }
    .top-image-title{
        text-align: center;
        margin-top: 10px;
    }
    .usertype-title{
        font-size: 12px;
        display: flex;
        display: flex;
        width: 100%;
        flex-direction: row;
        .usertype-title-left{
            color: #e9b150;
            width: 30%;
            text-align: left;
        }
        .usertype-titlle-right{
            width: 70%;
            text-align: right;
        }
    }
    .footer-item-bottom{
        align-items: center;
        justify-content: center;
        display: flex;
        text-align: center;
        font-size: 12px;
    }
    .footer-item-bottom-usertype3{
        margin-left: 36px;
        margin-right: 36px;
    }



    .body-top{
        text-align:left ;
        margin-left: 13px;
        font-size: 13px;
        margin-top: 8px;

    }
    .top-list{
        width: 100%;
        .border-style{
            border-bottom: 2px #9a773e solid;
        }
        ul{
            width: 100%;
            height: 54px;
            list-style: none;
            li{
                list-style: none;
                float: right;
                width: 33%;
                text-align: center;

            }
            .li-border{
                border-right: 1px #e9b150 solid;
                /*padding-right: 20px;*/
            }
        }
    }
    .login-botton-style{
        width: 70%;
        -webkit-justify-content: center;
        -webkit-align-items: center;
        margin-top: 8px;
        background-color: #9a773e;
        height: 26px;
        line-height: 26px;
        border-radius: 20px;
    }
    .default-color{
        color: #e9b150;
        font-size: 15px;
        font-weight: 600;
    }
    .default-titlte{
        font-size: 12px;
    }
    .loading{
        color: #e9b150;
        font-size: 14px;
        text-align: center;
        width: 100%;
        margin-top: 10px;

    }

    .col-md-12{
        width: 100%;
    }
    .select-default{
        select{
            background:url("../assets/images/select3.png")  no-repeat scroll 95% 55% #F0F0F0;
            background-color: transparent;
            padding-left: 56px;
        }
        .select-model{
            width: 140px;
            float: right;
            margin-right: 14px;
        }
    }
    .input-model{
        border-radius: 20px;
        border: #9a773e 1.4px solid;
        width:100%;
        box-shadow: 1px 0px 0px #9A773E, 3px 2px 1px #333333;
        input{
            background-color: transparent;
            border-radius: 20px;
            border:none;
            padding: 5px;
            color: #F0F0F0 !important;
            font-size: 14px !important;

        }
    }
    .form-control {
        display: block;
        font-size: 14px;
        line-height: 14px;
        width: 100%;
        font-weight: 500;
        font-family: fantasy;
        padding-left: 26px;
        height: 25px;
    }
    .top-row{
        margin-left: 36px;
        margin-top: 16px;
        margin-right: 36px;
    }


    .item-list{
        margin-left: 10px;
        margin-top: 14px;
        width: 100%;
        padding-right: 14px;
        padding-left: 7px;
        padding-top: 7px;
        padding-bottom: 7px;
        background-color: #524838;
        margin-right: 14px;
        opacity: 0.6;
        border-radius: 10px;
        .item-title{
            display: flex;
            flex-direction: row;
            font-size: 13px;
            .item-title-left{
                width: 70%;
                margin-top: 4px;
                overflow:hidden;
                text-overflow:ellipsis;
            }
            .item-title-right{
                width: 30%;
                overflow:hidden;
                text-overflow:ellipsis;
                text-align: right;
            }
        }
        .item-body{
            display: flex;
            flex-direction: row;
            font-size: 13px;
            color: #ffffff;
        }
        .item-bottom{
            display: flex;
            flex-direction: row;
            margin-top: 4px;
            font-size: 12px;
            .item-bottom-left{
                width: 70%;
                overflow:hidden;
                text-overflow:ellipsis;
            }
            .item-bottom-right{
                width: 30%;
                overflow:hidden;
                text-overflow:ellipsis;
                text-align: right;
                color: #e9b150;
                font-size: 15px;
            }

        }
        .item-body-left{
            width: 100%;
            overflow:hidden;
            text-overflow:ellipsis;
            color: #ffffff;
        }

    }
    .login-botton-style-usertype3{
        width: 40%;
        border-radius: 0px;
        margin-left: 20px;
    }
</style>